import React from 'react'
import { Button, Input, Row, Col } from 'antd'
import ListSort from 'components/list-sort'
import 'styles/component-lib/list-sort-doc.scss'

export default {
  key: 'list-sort',
  name: 'ListSort 列表排序',
  author: 'ant',
  description: '列表拖动排序组件。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'component', description: '内部元素的组件标签。', type: 'string', defaultValue: 'div'
      },{
        param: 'onChange', description: '排序后触发的方法，返回排序后的reactDom数组。', type: 'function(ReactDoms)', defaultValue: '-'
      },{
        param: 'dragClassName', description: '拖动中的元素的::class::。', type: 'string', defaultValue: '-'
      },{
        param: 'appearAnim', description: '列表进出场时的QueueAnim动画配置。', type: 'object', defaultValue: '-'
      },{
        param: 'onEventChange', description: '触发动作事件时回调的方法，返回对应事件。', type: 'function(e)', defaultValue: '-'
      }],
      description: '::ListSort::外层组件必须为已被定位过的组件。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '垂直方向的列表，所有的元素都可直接拖动。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div className="list-sort-doc">
            <div className="center-example">
              <ListSort>
                {[1,2,3,4].map(item => <div className="center-item" key={item}>{item}</div>)}
              </ListSort>
            </div>
          </div>
        )
      }
    },
    {
      title: '其他元素',
      description: '所有元素都可设置为可拖拽排序。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div className="list-sort-doc">
            <div className="h1-example">
              <ListSort component="h1">
                {[1, 2, 3].map((item, index) => <h1 key={index} className="h1-item">第{item}段文字</h1>)}
              </ListSort>
            </div>
          </div>
        )
      }
    }
  ]
}
